<template>
	<!-- 顶部筛选栏 -->
	<view class="filter-bar">
		<!-- <view class="filter-title">
			<text>全部门店</text>
			<uni-icons type="down"></uni-icons>
		</view> -->
		<view class="filter-tabs">
			<view class="tab-item" :class="{ 'active-tab': currentTab === 'newOrder' }" @click="changeTab('newOrder')">
				<text>订单</text>
			</view>
			<view class="tab-item" :class="{ 'active-tab': currentTab ==='store' }" @click="changeTab('store')">
				<text>门店</text>
			</view>
			<view class="tab-item" :class="{ 'active-tab': currentTab === 'delivery' }" @click="changeTab('delivery')">
				<text>配送</text>
			</view>
			<view class="tab-item" :class="{ 'active-tab': currentTab === 'channel' }" @click="changeTab('channel')">
				<text>渠道</text>
			</view>
			<view class="tab-item" :class="{ 'active-tab': currentTab === 'other' }" @click="changeTab('other')">
				<text>其他</text>
			</view>
		</view>
	</view>
	<view class="container" v-if="!isEmpty">
		<!-- 实时数据卡片 -->
		<view class="real-time-data">
			<view class="data-card">
				<view class="card-header">
					<text>今日实时数据</text>
				</view>
				<view class="card-content">
					<view class="data-item">
						<view class="data-title">订单量</view>
						<view class="data-value">{{dataSetObj.today_count}}</view>
						<view class="data-compare" v-if="dataSetObj.count_avg_type == 2">与昨日同比 ↑
							<span style="color: #5164ff;">{{dataSetObj.count_avg}}</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.count_avg_type == 0">与昨日同比
							<span style="color: #7c8aff;">持平</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.count_avg_type == 1">与昨日同比 ↓
							<span style="color: #d9323e;">{{dataSetObj.count_avg}}</span>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">今日订单金额(元)</view>
						<view class="data-value">{{dataSetObj.today_order_amount}}</view>
						<view class="data-compare" v-if="dataSetObj.avg_type == 2">与昨日同比 ↑
							<span style="color: #5164ff;">{{dataSetObj.avg}}</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.avg_type == 0">与昨日同比
							<span style="color: #7c8aff;">持平</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.avg_type == 1">与昨日同比 ↓
							<span style="color: #d9323e;">{{dataSetObj.avg}}</span>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">完成订单量</view>
						<view class="data-value">{{dataSetObj.today_complete_count}}</view>
						<view class="data-compare" v-if="dataSetObj.complete_avg_type == 2">与昨日同比 ↑
							<span style="color: #5164ff;">{{dataSetObj.complete_avg}}</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.complete_avg_type == 0">与昨日同比
							<span style="color: #7c8aff;">持平</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.complete_avg_type == 1">与昨日同比 ↓
							<span style="color: #d9323e;">{{dataSetObj.complete_avg}}</span>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">已取消订单量</view>
						<view class="data-value">{{dataSetObj.today_cancel_count}}</view>
						<view class="data-compare" v-if="dataSetObj.cancel_avg_type == 2">与昨日同比 ↑
							<span style="color: #5164ff;">{{dataSetObj.cancel_avg}}</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.cancel_avg_type == 0">与昨日同比
							<span style="color: #7c8aff;">持平</span>
						</view>
						<view class="data-compare" v-if="dataSetObj.cancel_avg_type == 1">与昨日同比 ↓
							<span style="color: #d9323e;">{{dataSetObj.cancel_avg}}</span>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">昨日订单量</view>
						<view class="data-value">{{dataSetObj.yesterday_count}}</view>
					</view>
					<view class="data-item">
						<view class="data-title">昨日订单金额(元)</view>
						<view class="data-value">{{dataSetObj.yesterday_order_amount}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 图表区域 -->
		<view class="chart-area">
			<view class="chart-header">
				<view class="chart-title">实时数据</view>
				<view class="chart-time">近7天</view>
			</view>
			<!-- <view class="chart-tabs">
				<view class="tab-item" :class="{ 'active-chart-tab': currentChartTab ==='revenue' }"
					@click="changeChartTab('revenue')">
					<text>商家实收</text>
				</view>
				<view class="tab-item" :class="{ 'active-chart-tab': currentChartTab === 'totalOrder' }"
					@click="changeChartTab('totalOrder')">
					<text>总订单</text>
				</view>
				<view class="tab-item" :class="{ 'active-chart-tab': currentChartTab === 'validOrder' }"
					@click="changeChartTab('validOrder')">
					<text>有效订单</text>
				</view>
				<view class="tab-item" :class="{ 'active-chart-tab': currentChartTab === 'customerPrice' }"
					@click="changeChartTab('customerPrice')">
					<text>客单价</text>
				</view>
			</view> -->
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
		</view>
	</view>
	<view class="empty" v-if="isEmpty">
		<image src="/static/empty-icon.png" mode="widthFix"></image>
		<text>暂无数据，如有问题，请联系客服</text>
	</view>
</template>
<script>
	import {
		getOrderData
	} from "@/api/datasetApi/dataset.js"
	export default {
		data() {
			return {
				currentTab: 'newOrder',
				currentChartTab: 'revenue',
				chartData: {},
				opts: {
					color: ["#1890FF"],
					padding: [15, 0, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				dataSetObj: {},
				isEmpty: false
			}
		},
		methods: {
			changeTab(tab) {
				this.currentTab = tab
				if (tab == 'newOrder') {
					this.isEmpty = false
				}
				if (tab == 'store') {
					this.isEmpty = true
				}
				if (tab == 'delivery') {
					this.isEmpty = true
				}
				if (tab == 'channel') {
					this.isEmpty = true
				}
				if (tab == 'store') {
					this.isEmpty = true
				}
				if (tab == 'other') {
					this.isEmpty = true
				}
			},
			changeChartTab(tab) {
				this.currentChartTab = tab
				if (tab === 'totalOrder') {} else if (tab === 'validOrder') {} else if (tab === 'customerPrice') {}
			},
			getOrderDataset() {
				getOrderData().then(res => {
					if (res.code == 200) {
						res.data.avg = Math.abs(res.data.avg)
						res.data.cancel_avg = Math.abs(res.data.cancel_avg)
						res.data.complete_avg = Math.abs(res.data.complete_avg)
						res.data.count_avg = Math.abs(res.data.count_avg)
						res.data.today_order_amount = res.data.today_order_amount / 100
						res.data.yesterday_order_amount = res.data.yesterday_order_amount / 100
						this.dataSetObj = res.data
						res.data.date_list = res.data.date_list.map(dateStr => {
							const parts = dateStr.split('-');
							return `${parts[1]}-${parts[2]}`;
						});
						let dataSetValue = {
							categories: res.data.date_list,
							series: [{
								name: "交易金额",
								data: res.data.values.map(value => value / 100)
							}, ]
						};
						this.chartData = JSON.parse(JSON.stringify(dataSetValue));
					}
				})
			}
		},
		onShow() {
			this.getOrderDataset()
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss">
	.filter-bar {
		margin-bottom: 20rpx;
		background-color: #fff;
		position: static;
		top: 0;

		.filter-title {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 50rpx;
			padding-top: 10rpx;

			text {
				font-size: 32rpx;
				font-weight: 550;
				margin-right: 10rpx;
				color: #333333;
			}

			.iconfont {
				font-size: 30rpx;
				color: #999;
			}
		}

		.filter-tabs {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.tab-item {
				padding: 10rpx 0rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
				border-bottom: 6rpx solid transparent;
				color: #666666;

				&.active-tab {
					border-color: #3399ff;
					color: #3399ff;
					font-size: 32rpx;
				}
			}
		}
	}

	.real-time-data {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 30rpx;

		.data-card {

			.card-header {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				margin-left: 20rpx;
			}

			.card-content {
				display: flex;
				flex-wrap: wrap;

				.data-item {
					width: 50%;
					padding: 10rpx 10rpx 10rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;

					.data-title {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 5rpx;
					}

					.data-value {
						font-size: 36rpx;
						font-weight: bold;
						margin-top: 20rpx;
					}

					.data-compare {
						font-size: 20rpx;
						color: #999;
						margin-top: 20rpx;
					}

					&:nth-child(odd) {
						border-right: 1rpx solid #ddd;
					}

					&:nth-child(n + 3) {
						border-top: 1rpx solid #ddd;
					}
				}
			}
		}
	}

	.chart-area {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.chart-title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.chart-time {
				font-size: 24rpx;
				color: #999;
			}
		}

		.chart-tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tab-item {
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
				border-bottom: 2rpx solid transparent;
				background-color: #f5f7f6;
				color: #666666;
				border-radius: 30rpx;

				&.active-chart-tab {
					background-color: #5162ff;
					color: #fff;
				}
			}
		}

		.charts-box {
			width: 100%;
			height: 300px;
			margin-top: 30rpx;
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		image {
			width: 200rpx;
			margin-bottom: 20rpx;
		}

		text {
			font-size: 24rpx;
		}
	}
</style>